
import { useEffect, useRef, useState } from 'react';
import { init, graphic } from 'echarts';
import classNames from 'classnames';

interface Props {
  className?: string;
  style?: object;
  fontSize?: number;
  value: number
}

const defaultProps = {
  className: '',
  style: {},
  fontSize: 14,
  value: 0
}

export default function Battery(props: Props = defaultProps) {
  const domRef = useRef(null);
  let chart;
  const { className, style, fontSize = 14, value = 0 } = props

  const initChart = () => {
    const { clientWidth, clientHeight } = domRef.current;
    const size = [clientWidth, clientHeight]
    const lineWidth = size[1] * 0.1
    chart = init(domRef.current, 'purple');
    chart.setOption({
      graphic: [
        {
          type: 'rect',
          shape: {
            x: lineWidth / 2,
            y: lineWidth / 2,
            width: size[0] - lineWidth - lineWidth,
            height: size[1] - lineWidth,
            r: 8,
          },
          style: {
            fill: 'rgba(0, 0, 0, 0)',
            stroke: '#000',
            lineWidth: lineWidth
          }
        },
        {
          type: 'rect',
          shape: {
            x: size[0] - lineWidth,
            y: size[1] / 2 - (size[1] / 2) / 2,
            width: lineWidth,
            height: size[1] / 2,
            r: [0, 4, 4, 0],
          },
          style: {
            fill: '#000',
            stroke: '#000',
            lineWidth: 2
          }
        },
      ],
      xAxis: {
        show: false
      },
      yAxis: {
        show: false
      },
    });

  }


  const updateValue = (value) => {
    const { clientWidth, clientHeight } = domRef.current;
    const size = [clientWidth, clientHeight]
    const lineWidth = size[1] / 10
    console.log('chart.setOption', chart.setOption)
    chart.setOption({
      series: [
        {
          type: 'custom',
          renderItem: function (params, api) {
            const value = api.value(0);
            const batteryWidth = value / 100 * (size[0] - lineWidth * 2 - lineWidth);
            const color = value < 10 ? '#FF2D2E' : value < 25 ? '#FFA63F' : '#5EFF5A';
            return {
              type: 'rect',
              shape: {
                x: lineWidth,
                y: lineWidth,
                width: batteryWidth,
                height: size[1] - lineWidth * 2,
                r: 4
              },
              style: {
                fill: color
              }
            };
          },
          data: [value]
        },
        {
          type: 'custom',
          renderItem: function (params, api) {
            const value = api.value(0);
            // const batteryWidth = value / 100 * (size[0] - lineWidth * 2 - lineWidth);
            // const color = value < 10 ? '#FF2D2E' : value < 25 ? '#FFA63F' : '#5EFF5A';
            return {
              type: 'text',
              style: {
                text: `${value}%`,
                x: size[0] / 2,
                y: size[1] / 2,
                textAlign: 'center',
                textVerticalAlign: 'middle',
                fill: '#fff',
                font: `${fontSize}px Arial`
              }
            };
          },
          data: [value]
        }
      ]
    })
  }



  useEffect(() => {
    initChart();

  }, [])

  useEffect(() => {
    updateValue(value);
    console.log('value', value)
  }, [value])

  return (
    <div ref={domRef} className={classNames('size-full', className)} style={style}></div>
  );
}
